<template>
    <div>
      <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;"></pstep>
      <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="130px">
        <el-form-item label="区域">
          <el-select style="width: 250px;" v-model="form.area" placeholder="请选择区域">
            <el-option label="东南中心" value="dn"></el-option>
            <el-option label="南方中心" value="nf"></el-option>
            <el-option label="北方中心" value="bf"></el-option>
          </el-select>
        </el-form-item>
        <div class="form-br"></div>
  
        <el-form-item label="网关名称">
          <el-input v-model="form.wgmc" placeholder="请输入" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="虚拟云VPC">
          <div style="display: flex; align-items: center;">
            <el-select style="width: 250px;" v-model="form.xnyvpc" placeholder="请选择VPC">
              <el-option label="vpc-default（192.168.0.0/16 ）" value="1"></el-option>
              <el-option label="vpc-defadsj（192.168.0.0/16 ）" value="2"></el-option>
              <el-option label="虚拟云名称（主网段）" value="3"></el-option>
            </el-select>
            <i class="el-icon-refresh-right" style="margin: 0 10px;"></i>
            <span style="color: #1890FF; cursor: pointer;">创建虚拟云VPC</span>
          </div>
        </el-form-item>
        <div class="form-br"></div>
  
        <el-form-item label="网关连接名称">
          <el-input v-model="form.wgljmc" placeholder="请输入" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="本端子网">
          <el-radio-group v-model="form.bdzwType">
            <el-radio-button label="子网"></el-radio-button>
            <el-radio-button label="网段"></el-radio-button>
          </el-radio-group>
          <div style="margin-top: 10px;">
            <el-select v-if="form.bdzwType === '子网'" v-model="form.zw" placeholder="请选择子网" style="width: 250px;">
              <el-option label="子网1" value="1"></el-option>
              <el-option label="子网2" value="2"></el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <el-input v-if="form.bdzwType === '网段'" v-model="form.wd" type="textarea" :rows="4" placeholder="请输入子网和掩码，多个以半角逗号隔开，例如：192.168.54.0/24,192.168.54.0/24" style="width: 600px;" />
          </div>
        </el-form-item>
        <el-form-item label="远端网关">
          <div style="display: flex; align-items: center;">
            <el-input v-model="form.wg1" placeholder="请输入" style="width: 100px;" />
            <div class="dot"></div>
            <el-input v-model="form.wg2" placeholder="请输入" style="width: 100px;" />
            <div class="dot"></div>
            <el-input v-model="form.wg3" placeholder="请输入" style="width: 100px;" />
            <div class="dot"></div>
            <el-input v-model="form.wg4" placeholder="请输入" style="width: 100px;" />
            <div style="color: #d7d7d7; font-size: 20px; font-weight: bold; margin: 0 6px;">/</div>
            <el-select v-model="form.dk" placeholder="请选择" style="width: 100px;">
              <el-option
                v-for="item in dkOption"
                :key="'dk-item' + item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="远程子网">
          <el-input v-model="form.yczw" type="textarea" :rows="4" placeholder="请输入子网和掩码，多个以半角逗号隔开，例如：192.168.54.0/24,192.168.54.0/24" style="width: 600px;" />
        </el-form-item>
        <el-form-item label="共享密钥">
          <el-input v-model="form.gxmy" placeholder="请输入" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.password" placeholder="请输入" style="width: 250px;" />
        </el-form-item>
  
        <div class="form-br"></div>
        <el-form-item label="高级配置">
          <el-radio-group v-model="gjpz">
            <el-radio-button label="默认配置"></el-radio-button>
            <el-radio-button label="自定义配置"></el-radio-button>
          </el-radio-group>
          <div class="strategy-info">
            <div class="strategy-item">
              <div class="strategy-title">IKE策略</div>
              <div class="s-form-item">
                <label>认证策略</label>
                <el-select v-model="form.ikerzcl" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="sha-256" value="1"></el-option>
                  <el-option label="sha-384" value="2"></el-option>
                  <el-option label="sha-512" value="3"></el-option>
                  <el-option label="sha1" value="4"></el-option>
                  <el-option label="md5" value="5"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>加密算法</label>
                <el-select v-model="form.ikejmsf" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="AES-128" value="1"></el-option>
                  <el-option label="AES-192" value="2"></el-option>
                  <el-option label="AES-256" value="3"></el-option>
                  <el-option label="3DES" value="4"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>DH算法</label>
                <el-select v-model="form.ikedhsf" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="DH1" value="1"></el-option>
                  <el-option label="DH2" value="2"></el-option>
                  <el-option label="DH5" value="3"></el-option>
                  <el-option label="DH9" value="4"></el-option>
                  <el-option label="DH14" value="5"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>IKE版本</label>
                <el-select v-model="form.ikebb" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="IKEv1" value="1"></el-option>
                  <el-option label="IKEv2" value="2"></el-option>
                </el-select>
              </div>
              <p>生命周期（秒）6443300</p>
            </div>
            <div class="strategy-item">
              <div class="strategy-title">IPsec策略</div>
              <div class="s-form-item">
                <label>认证策略</label>
                <el-select v-model="form.ipsecrzcl" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="sha-256" value="1"></el-option>
                  <el-option label="sha-384" value="2"></el-option>
                  <el-option label="sha-512" value="3"></el-option>
                  <el-option label="sha1" value="4"></el-option>
                  <el-option label="md5" value="5"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>加密算法</label>
                <el-select v-model="form.ipsecjmsf" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  
                  <el-option label="AES-128" value="1"></el-option>
                  <el-option label="AES-192" value="2"></el-option>
                  <el-option label="AES-256" value="3"></el-option>
                  <el-option label="3DES" value="4"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>PFS</label>
                <el-select v-model="form.ipsecpfs" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="开启" value="1"></el-option>
                  <el-option label="关闭" value="2"></el-option>
                </el-select>
              </div>
              <div class="s-form-item">
                <label>传输协议</label>
                <el-select v-model="form.ipseccsxy" :disabled="gjpz === '默认配置'" placeholder="请选择" style="width: 250px;">
                  <el-option label="AH" value="1"></el-option>
                  <el-option label="ESP" value="2"></el-option>
                  <el-option label="AH-ESP" value="3"></el-option>
                </el-select>
              </div>
              <p>生命周期（秒）6443300</p>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="step-btn-box">
        <el-button type="primary" @click="handleAdd">立即创建</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import pstep from '@/components/publicStep'
  export default {
    components:{ pstep },
    data () {
      return {
        stepData: [{num:1,nameIn:'1',nameOut:'基础配置'}],
        doneNum: 1,
        form: {
          bdzwType: '子网',
          ikerzcl:'1',
          ikejmsf:'1',
          ikedhsf:'1',
          ikebb:'1',
          ipsecrzcl:'1',
          ipsecjmsf:'1',
          ipsecpfs:'1',
          ipseccsxy:'1',
        },
        dkOption: [],
        gjpz: '默认配置'
      }
    },
    created () {
      this.getDkOption()
    },
    methods: {
  
      /**
       * 获取端口下拉
      */
      getDkOption () {
        for (let i = 1; i <= 28; i++) {
          this.dkOption.push(i)
        }
      },
      handleAdd(){
        this.$router.push({path:'/networksuc/vpn'})
      }
    }
  }
  </script>
  
  <style scoped lang="less">
    .p-form {
      /deep/.el-form-item__label {
        font-size: 16px;
        font-family: 'PingFang SC ', 'PingFang SC';
        font-weight: 650;
        font-style: normal;
        color: rgba(0, 0, 0, 0.847058823529412);
      }
    }
  
    .addnum {
      display: flex;
  
      .explain {
        margin-left: 10px;
        line-height: 50px;
        font-size: 12px;
        color: #AAAAAA;
      }
    }
  
    .form-br {
      height: 1px;
      background-color: #ebebeb;
      width: 100%;
      margin-bottom: 15px;
    }
  
    .role-desbox {
      width: 932px;
      min-height: 125px;
  
      .escplasin {
        margin-left: 10px;
        font-size: 12px;
        color: #AAAAAA;
      }
  
      .esclist {
        height: 50px;
        display: flex;
        align-items: center;
  
        div {
          color: #333333;
          width: 160px;
          text-align: center;
        }
      }
  
      .esclist-t {
        height: 35px;
        background-color: rgba(242, 242, 242, 1);
      }
  
    }
  
    .tag-btn {
      margin-right: 15px;
      height: 22px;
      width: 22px;
      line-height: 22px;
      text-align: center;
      border: 1px #1890FF solid;
      border-radius: 50%;
      color: #1890FF;
  
      &:hover {
        background-color: #1890FF;
        color: #ffffff;
      }
    }
  
    /deep/.el-radio-button {
  
      border-radius: 4px;
      overflow: hidden;
    }
  
    /deep/.el-radio-button {
      .el-radio-button__inner {
        background-color: rgba(188, 223, 255, 1);
        color: #716E6E;
        font-size: 16px;
      }
  
      &.is-active {
        .el-radio-button__inner {
          background-color: #1890FF;
          color: #ffffff;
  
        }
      }
    }
  
    .pcarea3 {
      font-size: 12px;
      color: #FF3636;
    }
  
    .strategy-info {
      padding: 10px;
      margin-top: 20px;
      display: flex;
      line-height: 1;
      background-color: #f2f2f2;
      .strategy-item {
        flex: 1;
      }
      .strategy-title {
        padding: 10px 0 20px;
        font-size: 16px;
        font-weight: bold;
      }
      .s-form-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        label {
          width: 120px;
          text-align: left;
        }
      }
    }
    .dot {
      width: 6px;
      height: 6px;
      margin: 0 6px;
      border-radius: 3px;
      background-color: #d7d7d7;
    }
  </style>